{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from 'macros-protocol.html' import callout %}

{% extends "firefox/base/base-protocol.html" %}

{% macro compare_item(
  link,
  title,
  ga_title
) -%}
<li class="c-compare-item">
  <a href="{{ link }}" data-link-text="{{ ga_title }}">
    <h3 class="c-compare-item-title">{{ title }}</h3>
    <p class="c-compare-item-cta">{{ ftl('ui-learn-more') }}</p>
  </a>
</li>
{%- endmacro %}

{% block page_css %}
  {{ css_bundle('firefox-compare-index')}}
{% endblock page_css %}

{% block page_title %}{{ ftl('compare-index-compare-firefox-with-other') }}{% endblock page_title %}
{% block page_desc %}{{ ftl('compare-index-see-how-firefox-stacks-up') }}{% endblock page_desc %}

{% block body_class %}compare-index{% endblock %}

{% block sub_navigation %}
  {% include 'firefox/includes/sub-nav-firefox.html' %}
{% endblock %}

{% block content %}
{{ callout (
  title=self.page_title(),
  desc=self.page_desc(),
  class='c-compare-header mzp-t-content-md'
)}}

<div class="mzp-l-content">

  <ul class="mzp-l-columns mzp-t-columns-three">
    {{ compare_item(
      link=url('firefox.browsers.compare.chrome'),
      title=ftl('compare-index-firefox-versus-google-chrome'),
      ga_title=ftl('compare-index-firefox-versus-google-chrome'),
    ) }}

    {{ compare_item(
      link=url('firefox.browsers.compare.edge'),
      title=ftl('compare-index-firefox-versus-microsoft-edge'),
      ga_title=ftl('compare-index-firefox-versus-microsoft-edge'),
    ) }}

    {{ compare_item(
      link=url('firefox.browsers.compare.safari'),
      title=ftl('compare-index-firefox-versus-apple-safari'),
      ga_title=ftl('compare-index-firefox-versus-apple-safari'),
    ) }}

    {{ compare_item(
      link=url('firefox.browsers.compare.brave'),
      title=ftl('compare-index-firefox-versus-brave'),
      ga_title=ftl('compare-index-firefox-versus-brave'),
    ) }}

    {{ compare_item(
      link=url('firefox.browsers.compare.opera'),
      title=ftl('compare-index-firefox-versus-opera'),
      ga_title=ftl('compare-index-firefox-versus-opera'),
    ) }}
  </ul>

</div>
{% endblock content %}
